<template>
    <div>
        <el-container class="common-layout">
            <el-main>
                <div class="divs">
                    <span class="title">
                        <el-icon>
                            <House />
                        </el-icon>
                        财务管理/应收单/<span style="color: #0098FF;">应收单结算</span>
                    </span>
                </div>
                <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;费用信息</p>
                <el-form :model="form" label-width="auto" :rules="rules" ref="refform">
                    <div
                        style="background-color: #F5F9FF;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="应付单号:" prop="payable_number">
                                    <el-input v-model="form.Payable_number" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="运单号:" prop="Wb_number">
                                    <el-input v-model="form.wb_number" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="运费成本:" prop="freight_costs">
                                    <el-input v-model="form.freight_costs" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="包装费:" prop="packag_fee">
                                    <el-input v-model="form.packag_fee" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="其他费用:" prop="other_fee">
                                    <el-input v-model="form.other_fee" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1050px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;应付</p>
                    <div
                        style="background-color: #F5F9FF;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="现付:" prop="pay_as_you_go">
                                    <el-input v-model="form.pay_as_you_go" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="预付:" prop="prepayment">
                                    <el-input v-model="form.prepayment" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="到付:" prop="collect">
                                    <el-input v-model="form.collect" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col> 
                            <el-col :span="8">
                                <el-form-item label="周期付:" prop="periodical_payment">
                                    <el-input v-model="form.periodical_payment" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1060px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;实付</p>
                    <div
                        style="background-color: #F5F9FF;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="现付:" prop="actual_payment_Pay">
                                    <el-input v-model="form.actual_payment_Pay" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="预付:" prop="actual_payment_prepayment">
                                    <el-input v-model="form.actual_payment_prepayment" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="到付:" prop="actual_payment_collect">
                                    <el-input v-model="form.actual_payment_collect" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="周期付:" prop="actual_payment_periodical">
                                    <el-input v-model="form.actual_payment_periodical" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="height: 50px;"></div>
                    <div class="button">
                        <el-form-item>
                            <el-button>取消</el-button>
                            <el-button type="primary" @click="Update">保存</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { onMounted, ref, reactive } from 'vue'
//import axios from 'axios';
import $http from '@/axios/base.js';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue';
import { Upload } from 'element-plus';
import { useRoute, useRouter } from "vue-router";
export default {
    setup() {
        let tableData = ref([]);
        let route = useRoute();
        let router = useRouter();
        let id = ref('');
        let refform = ref(null);

        let form = reactive({
            Payable_number: '',  //应付单号
            wb_number: '',  //运单号
            freight_costs: '',  //运费成本
            packag_fee: '',  //包装费
            handling_fee: '',  //装卸费
            other_fee: '',  //其他费用
            pay_as_you_go: '',  //现付
            prepayment: '',  //预付
            collect: '',  //到付
            periodical_payment: '',  //周期付
            actual_payment_Pay: '',  //实付现付
            actual_payment_prepayment: '',  //实付预付
            actual_payment_collect: '',  //实付到付
            actual_payment_periodical: '',  //实付周期付
        })


        onMounted(() => {
            id.value = route.query.id;
            show();
        })


    const GetWb_id = async (id, index) => {
      await $http.get(`http://localhost:5261/api/Payable_meter/GetWb_id/${id}`)
        .then((res) => {
          Object.assign(tableData.value[index], res);
          console.log(tableData.value[index]);
          form.wb_number = tableData.value[index].wb_number;
          form.freight_costs = tableData.value[index].freight_costs;
          form.packag_fee = tableData.value[index].packag_fee;
          form.handling_fee = tableData.value[index].handling_fee;
          form.other_fee = tableData.value[index].other_fee;
          form.pay_as_you_go = tableData.value[index].pay_as_you_go;
          form.prepayment = tableData.value[index].prepayment;
          form.collect = tableData.value[index].collect;
          form.periodical_payment = tableData.value[index].periodical_payment;
          console.log(form.wb_number);
        })
        .catch((err) => console.log(err))
    }

        function show() {  //根据id查询要显示的值
            $http.get(`http://localhost:5261/api/Payable_meter/GetPayable_meter_Update/${id.value}`).then((res) => {
                tableData.value = res;
                res.forEach((item, index) => {
                    GetWb_id(item.wb_id, index);
                });
                console.log(res);
                form.Payable_number=res[0].payable_number;
                form.actual_payment_Pay = res[0].actual_payment_Pay;  //实收现付
                form.actual_payment_prepayment = res[0].actual_payment_prepayment;  //实收预付
                form.actual_payment_collect = res[0].actual_payment_collect;  //实收到付
                form.actual_payment_periodical = res[0].actual_payment_periodical;  //实收周期付
            }).catch((err) => {
                console.log("错误：" + err);
            })
        }
        const rules = reactive({
            actual_payment_Pay: [
                { required: true, message: '实收现付不能为空', trigger: 'blur' }
            ],
            actual_payment_prepayment: [
                { required: true, message: '实收预付不能为空', trigger: 'blur' }
            ],
            actual_payment_collect: [
                { required: true, message: '实收到付不能为空', trigger: 'blur' }
            ],
            actual_payment_periodical: [
                { required: true, message: '实收周期付不能为空', trigger: 'blur' }
            ],
        });
        function Update() {
            refform.value.validate((valid) => {
                if (valid) {
                    form.Payable_id = id.value;
                    console.log(form);
                    $http.put("http://localhost:5261/api/Payable_meter/Update", form).then((res) => {
                        if (res) {
                            ElMessage.success("修改成功！");
                            router.push('/Payable_meter');
                        } else {
                            ElMessage.success("修改失败！");
                        }
                    })
                }else{
                    ElMessage.warning("请填写完整数据!");
                }
            })
        }

        return {
            form,
            Plus,
            tableData,
            id,
            Update,
            rules,
            refform,
            GetWb_id
        }
    }
}
</script>

<style scoped>
.common-layout {
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
    background-color: #D3DCE6;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
    /* margin: 50px; */
    /* display: flex;
    align-items: center; */
}

.title {
    padding-right: 930px;
    padding-top: 20px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: aqua;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 100px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.button {
    padding-right: 37px;
    margin-top: 20px;
    height: 50px;
    position: fixed;
    /* 固定位置 */
    top: auto;
    /* 距离顶部20像素 */
    right: 70px;
    /* 距离右侧20像素 */
    bottom: 20px;
    /* 底部自动 */
    left: auto;
    /* 左侧自动 */
    z-index: 1000;
    /* 确保它在其他内容之上 */

}
</style>